<script lang="ts" setup>
import { getCurrentInstance, onMounted, reactive, ref } from 'vue'
import { onPageScroll, onReady } from '@dcloudio/uni-app'
import TnSwitchTab from '@tuniao/tnui-vue3-uniapp/components/switch-tab/src/switch-tab.vue'
import TnButton from '@tuniao/tnui-vue3-uniapp/components/button/src/button.vue'
import TnTag from '@tuniao/tnui-vue3-uniapp/components/tag/src/tag.vue'
import TnEmpty from '@tuniao/tnui-vue3-uniapp/components/empty/src/empty.vue'
import { tnNavPage } from '@tuniao/tnui-vue3-uniapp/utils'
import type { NavbarRectInfo } from '@tuniao/tnui-vue3-uniapp/components/navbar'
import PageContainer from '@/components/page-container/index.vue'
import { useScrollTransparentNavbar } from '@/hooks'
import user from '@/api/user.js'
import { FILE_URL, USER_INFO } from '@/api/config.js'

// 导航栏的高度
const navbarHeight = ref(0)
const instance = getCurrentInstance()
const state = reactive({
  uid: 0,
  currentTabIndex: 0,
  tabs: ['我加入的圈子', '我管理的圈子'],
  joinCirclesLists: [],
  manageCirclesLists: [],
})

const { init: initTransparentScroll, opacityScrollHandle } =
  useScrollTransparentNavbar(instance)

// 导航栏初始化完毕
const navbarInitFinishHandle = (info: NavbarRectInfo) => {
  navbarHeight.value = info.height
}
const navCirclesDetailPage = (circlesId: number) => {
  tnNavPage(`/circlesPages/detail?circlesId=${circlesId}`)
}
const getJoinCirclesLists = () => {
  user
    .joinCirclesLists({
      page: 1,
      page_size: 50,
    })
    .then((res) => {
      console.log(res, 'joinCirclesLists')
      if (res.code == 1) {
        state.joinCirclesLists = res.data
      }
    })
    .catch((err) => {
      console.log(err)
    })
}

const getManageCirclesLists = () => {
  user
    .manageCirclesLists({
      page: 1,
      page_size: 50,
    })
    .then((res) => {
      console.log(res, 'manageCirclesLists')
      if (res.code == 1) {
        state.manageCirclesLists = res.data
      }
    })
    .catch((err) => {
      console.log(err)
    })
}

onMounted(() => {
  const userInfo = uni.getStorageSync(USER_INFO)
  if (!userInfo) {
    state.uid = userInfo.id
  }
  getJoinCirclesLists()
  getManageCirclesLists()
})

onReady(() => {
  initTransparentScroll()
})
onPageScroll((e) => {
  opacityScrollHandle(e.scrollTop)
})
</script>

<template>
  <PageContainer :placeholder-bottom="true">
    <TnNavbar
      fixed
      :bottom-shadow="false"
      :placeholder="false"
      @init-finish="navbarInitFinishHandle"
    >
      我的圈子
    </TnNavbar>
    <view class="container">
      <view class="tn-mt-sm" :style="{ paddingTop: `${navbarHeight}px` }">
        <view class="tn-flex justify-center tn-mt-xs">
          <TnButton
            width="90%"
            shape="round"
            size="xl"
            font-size="30rpx"
            bg-color="tn-gradient-bg__cool-7"
            :border="false"
            border-color="#ebebeb"
            :custom-style="{
              padding: '26rpx 0',
              textAlign: 'center',
            }"
            @click="tnNavPage('/circlesPages/create')"
          >
            <TnIcon name="add-circle" />
            创建圈子
          </TnButton>
        </view>
        <view class="tn-mt-xl">
          <TnSwitchTab
            v-model="state.currentTabIndex"
            :tabs="state.tabs"
            style="padding-bottom: 20rpx"
            inactive-bg-color="#f8f7f8"
          >
            <view v-if="state.currentTabIndex === 0">
              <view
                v-if="state.joinCirclesLists.length == 0"
                class="tn-mt-xl tn-pb-xl"
              >
                <TnEmpty mode="list" color="#cecece" size="xl">
                  <template #tips>
                    <view class="tn-text-center">
                      <view class="tn-p" style="line-height: 60rpx">
                        您还未找到心仪的圈子加入呢？
                      </view>
                      <view>
                        <TnButton
                          width="60%"
                          height="70rpx"
                          shape="round"
                          @click="tnNavPage('/circlesPages/classify')"
                        >
                          逛一逛
                        </TnButton>
                      </view>
                    </view>
                  </template>
                </TnEmpty>
              </view>
              <block v-else>
                <view
                  v-for="(item, index) in state.joinCirclesLists"
                  :key="index"
                  class="tn-flex circles-lists tn-flex-col-center tn-shadow-md tn-radius"
                >
                  <view class="" @click="navCirclesDetailPage(item.circles.id)">
                    <view class="logo-pic">
                      <view class="logo-image">
                        <view
                          class=""
                          :style="
                            'background-image:url(' +
                            FILE_URL +
                            item.circles.image +
                            ');width: 100rpx;height: 100rpx;background-size: cover;'
                          "
                        />
                      </view>
                    </view>
                  </view>
                  <view class="tn-pl-sm">
                    <view
                      class="tn-flex justify-between tn-text-ellipsis-1"
                      @click="navCirclesDetailPage(item.circles.id)"
                    >
                      <view class="justify-content-item">
                        <text class="tn-text-lg">{{ item.circles.name }}</text>
                      </view>
                    </view>
                    <view
                      class="tn-pt-xs tn-text-ellipsis tn-text-ellipsis-1"
                      style="color: #9c9c9c"
                    >
                      <text class="tn-text-sm">
                        {{ item.circles.follow_total }}圈友 ·
                        {{ item.circles.dynamic_total }}动态
                      </text>
                    </view>
                  </view>
                </view>
              </block>
            </view>
            <view v-if="state.currentTabIndex === 1">
              <view
                v-if="state.manageCirclesLists.length == 0"
                class="tn-mt-xl tn-pb-xl"
              >
                <TnEmpty mode="list" color="#cecece" size="xl">
                  <template #tips>
                    <view class="tn-text-center">
                      <view class="tn-p" style="line-height: 60rpx">
                        您可能还没有开始管理任何圈子
                      </view>
                    </view>
                  </template>
                </TnEmpty>
              </view>
              <block v-else>
                <view
                  v-for="(item, index) in state.manageCirclesLists"
                  :key="index"
                  class="tn-flex circles-lists tn-flex-col-center tn-shadow-md tn-radius"
                >
                  <view class="" @click="navCirclesDetailPage(item.circles.id)">
                    <view class="logo-pic">
                      <view class="logo-image">
                        <view
                          class=""
                          :style="
                            'background-image:url(' +
                            FILE_URL +
                            item.circles.image +
                            ');width: 100rpx;height: 100rpx;background-size: cover;'
                          "
                        />
                      </view>
                    </view>
                  </view>
                  <view class="tn-pl-sm" style="width: 60vw">
                    <view
                      class="tn-flex justify-between tn-text-ellipsis-1"
                      @click="navCirclesDetailPage(item.circles.id)"
                    >
                      <view class="justify-content-item">
                        <text class="tn-text-lg">{{ item.circles.name }}</text>
                      </view>
                    </view>
                    <view
                      class="tn-pt-xs tn-text-ellipsis tn-text-ellipsis-1"
                      style="color: #9c9c9c"
                    >
                      <text class="tn-text-sm">
                        {{ item.circles.follow_total }}圈友 ·
                        {{ item.circles.dynamic_total }}动态
                      </text>
                    </view>
                  </view>
                  <view
                    class="tn-flex justify-end items-center"
                    style="width: 15vw; height: 100rpx; margin-right: -30rpx"
                  >
                    <TnTag
                      v-if="state.uid == item.circles.user_id"
                      shape="circleLeft"
                      bg-color="#FF6600"
                      font-size="22rpx"
                    >
                      我创建的
                    </TnTag>
                    <TnTag v-else shape="circleLeft" font-size="22rpx">
                      我管理的
                    </TnTag>
                  </view>
                </view>
              </block>
            </view>
          </TnSwitchTab>
        </view>
      </view>

      <view class="tn-tabbar-height" />
    </view>
  </PageContainer>
</template>

<style lang="scss" scoped>
@use './styles/circleslist.scss';
</style>
